import { FC, useState } from 'react';
import { Space, Input } from 'antd'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
interface BraftProps {}

const Braft: FC<BraftProps> = () => {
  const [editorState, setEditorState] = useState('')
  const [title, setTitle] = useState('')

  const handleChange = (editorState: any) => {
    console.log(editorState.toHTML())
    setEditorState(editorState.toHTML())
  }
  return (
    <Space direction='vertical' style={{ width: '100%'}}>
      <Input placeholder="文章标题" value={title} onChange={ event => setTitle(event.target.value)}></Input>
      {/* 富文本编辑器 */}
      <BraftEditor
        value={editorState}
        onChange={handleChange}
      />
      <div>预览</div>
      <h1>{ title }</h1>
      {/* react 如何展示类似于vue中 v-html的功能 */}
      <div dangerouslySetInnerHTML={{ __html: editorState }}></div>
    </Space>
  );
}

export default Braft;